<template>
  <div id="approvePerson">
    <div class="header">
      <div class="left">
        <span class="top1">流程介绍</span>
        <span class="bottom1"
          ><span v-for="(step, index) in tabInfo[handleType].steps" :key="index">{{ step }}&nbsp;&nbsp;&nbsp;<span v-if="index != tabInfo[handleType].steps.length - 1">>></span>&nbsp;&nbsp;&nbsp;</span></span
        >
      </div>
      <div class="right"></div>
    </div>
    <div class="content">
      <!-- <div class="left" >
        <img :src="tabInfo[handleType].img" alt="">
      </div>
      <div class="right">
        <h1>{{tabInfo[handleType].title}}</h1>
        <div>{{tabInfo[handleType].remark}}</div>
        <el-button type="primary">
          <span class="iconfont">&#xea0b;</span>
          发起审批
        </el-button>
      </div> -->
      <template v-if="formList && formList.length > 0">
        <div class="item" v-for="(item, index) in formList" :key="item.formId + index">
          <div class="left">
            <img :src="item.icon" alt="" />
            <span>{{ item.formName }}</span>
          </div>
          <el-button type="primary" plain @click="openApprove(item.formId)">发起审批</el-button>
        </div>
      </template>
      <el-empty v-else description="暂无审批单据"></el-empty>
    </div>
    <!-- 审批单据抽屉 -->
    <el-drawer :visible.sync="drawer" size="30%" :destroy-on-close="true" :show-close="false" :withHeader="false" :modal-append-to-body="false">
      <div class="views" id="iframe-container" style="padding: 0; overflow: hidden" v-loading="loading">
        <iframe :src="`${url}?appKey=${getTokenParams.appKey}&formId=${formId}&credentialId=${getTokenParams.credentialId}&userId=${employeeId ? employeeId : getTokenParams.userId}&appSecret=${getTokenParams.appSecret}&query=${query}&random=${random}&diySponsor=${employeeId}`" style="width: 100%; height: 99.45%; background: #ffffff" frameborder="0"></iframe>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import common from "../../examineApproveCloud/mixins/common";
export default {
  name: "approvePerson",
  mixins: [common],
  props: {
    handleType: {
      type: String,
    },
    employeeId: {
      type: String,
    },
  },
  data() {
    return {
      tabInfo: {
        induction: {
          title: "录用",
          img: require("../../../assets/images/personnel/personChange/ruzhi.png"),
          remark: "适用于新员工录入申请,审批通过自动进入待入职",
          steps: ["1、HR为候选人发起录用单据审批", "2、审批通过", "3、系统自动添加候选人至待入职列表"],
          type: 1,
        },
        positive: {
          title: "转正",
          img: require("../../../assets/images/personnel/personChange/zhuanzheng.png"),
          remark: "适用于新员工转正申请,审批通过自动进入已转正",
          steps: ["1、员工自行发起转正单据审批", "2、审批通过", "3、系统自动更新员工状态"],
          type: 2,
        },
        transfer: {
          title: "调动",
          img: require("../../../assets/images/personnel/personChange/diaodong.png"),
          remark: "适用于新员工调动申请,审批通过自动调整员工状态",
          steps: ["1、员工自行发起调动单据审批", "2、审批通过", "3、系统自动更新员工状态"],
          type: 3,
        },
        departure: {
          title: "离职",
          img: require("../../../assets/images/personnel/personChange/lizhi.png"),
          remark: "适用于新员工离职申请,审批通过自动调整员工状态",
          steps: ["1、员工自行发起离职单据审批", "2、审批通过", "3、系统自动更新员工状态"],
          type: 4,
        },
      },
      formList: [],
      query: "initiateApproval", //审批页面
      formId: "", //审批表单id
      drawer: false,
    };
  },
  created() {
    this.$api.personChangeNew.GetPersonalFrom({ type: this.tabInfo[this.handleType].type }).then((res) => {
      console.log(res, "GetPersonalFrom");
      this.formList = res.data.data;
    });
  },
  mounted() {
    window.addEventListener("message", (e) => {
      // 监听子页面想父页面的传参
      if (e.data.type == 1) {
        //保存单据成功
        this.drawer = false;
      }
    });
  },
  methods: {
    openApprove(formId) {
      this.formId = formId;
      this.drawer = true;
    },
  },
};
</script>
<style lang="less" scoped>
#approvePerson {
  height: 100%;
  overflow: hidden;
  .header {
    width: 100%;
    height: 60px;
    background-color: #f7f8fc;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;
    .left {
      width: 85%;
      height: 100%;
      display: flex;
      flex-flow: column;
      padding: 10px 15px;
      .top {
        font-size: 16px;
        font-weight: bold;
      }
      .bottom1 {
        color: #949599;
        font-size: 12px;
      }
    }
    .right {
      width: 15%;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 20px;
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .right div:hover {
      color: #39a4ef;
      cursor: pointer;
    }
  }
  .content {
    height: 74%;
    overflow: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 20px;
    .item {
      width: 75%;
      display: flex;
      flex-flow: row;
      align-content: center;
      justify-content: space-between;
      padding: 15px 20px;
      border: 1px solid #e8ebf1;
      margin: 5px;
      border-radius: 10px;
      .left {
        display: flex;
        flex-flow: row;
        align-items: center;
        height: 40px;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
    .left {
      width: 28%;
      height: 52.8%;
      //   background-image: url("../../../assets/images/personnel/personChange/ruzhi.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      height: 52.8%;
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      justify-content: center;
      margin-left: 50px;
      h1 {
        font-size: 40px;
        font-weight: 600;
      }
      button {
        margin-top: 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
      }
    }
  }
}
</style>
